<template>
    <div class="index">
      <Specifices>
        <!-- 搜索 -->
        <template #select>
          <div class="custom-select-wrapper">
            <div class="search-input-container">
              <div class="search-icon"></div>
              <input type="text" v-model="searchQuery" @input="handleSearch" @focus="showDropdown = true"
                placeholder="请输入搜索" class="search-input">
              <div class="input-border"></div>
              <div class="input-glow"></div>
            </div>
            <div v-if="showDropdown" class="custom-dropdown">
              <div class="dropdown-header">
                <div class="header-line"></div>
                <div class="header-content">
                  <div class="header-icon"></div>
                  <span class="header-text">学生列表</span>
                  <div class="header-badge">{{ filteredOptions.length }}</div>
                </div>
                <div class="header-line"></div>
              </div>
              <div v-for="item in filteredOptions" :key="item.studentId" class="custom-option" @click="selectOption(item)"
                :class="{ 'selected': selectedValue && selectedValue.studentId === item.studentId }">
                <div class="tech-option">
                  <div class="option-dot"></div>
                  <span>{{ item.studentName }}</span>
                  <div class="option-hover-effect"></div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 头像 -->
        <template #top-left>
          <div class="avatar-container">
            <img v-if="studnetInfo.studentSex == '1'" src="@/assets/girl.gif" class="sex-icon">
            <img v-else src="@/assets/boy.gif" class="sex-icon">
          </div>
        </template>
        <!-- 五角星 -->
        <template #right-top>
          <div class="star-box">
            <svg v-for="n in starCounts.yellowStars" :key="`yellow-${n}`" class="icon" viewBox="0 0 1069 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2640" width="30" height="30">
              <defs>
                <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                  <feGaussianBlur stdDeviation="2" result="blur" />
                  <feComposite in="SourceGraphic" in2="blur" operator="over" />
                </filter>
                <linearGradient id="starGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#00ffff" />
                  <stop offset="100%" style="stop-color:#0b61aa" />
                </linearGradient>
              </defs>
              <path
                d="M1069.88749 387.172284h-361.739402L529.835781 0 361.7212 387.172284H0l300.584902 270.02358-86.610134 366.804136 315.861013-219.075906 341.339401 208.896382-101.881695-392.277973z"
                fill="url(#starGradient)" stroke="#00ffff" stroke-width="2" filter="url(#glow)" p-id="2641">
              </path>
            </svg>
            <svg v-for="n in starCounts.whiteStars" :key="`white-${n}`" class="icon" viewBox="0 0 1069 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="2640" width="30" height="30">
              <defs>
                <linearGradient id="starGradientInactive" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:rgba(0, 255, 255, 0.2)" />
                  <stop offset="100%" style="stop-color:rgba(11, 97, 170, 0.2)" />
                </linearGradient>
              </defs>
              <path
                d="M1069.88749 387.172284h-361.739402L529.835781 0 361.7212 387.172284H0l300.584902 270.02358-86.610134 366.804136 315.861013-219.075906 341.339401 208.896382-101.881695-392.277973z"
                fill="url(#starGradientInactive)" stroke="rgba(0, 255, 255, 0.3)" stroke-width="1" p-id="2641"></path>
            </svg>
          </div>
        </template>
        <!-- 学生信息 -->
        <template #class-name>
          <div class="class-name"> <span>姓名:</span>{{ studnetInfo.studentName }}</div>
        </template>
        <template #class-id>
          <div class="class-id"><span>学号:</span>{{ studnetInfo.studentId }}</div>
        </template>
        <template #score>
          <div class="score"><span>成绩:</span>{{ score }}</div>
        </template>
        <template #botton-left>
          <div class="flower-box">
            <span>小红花</span>
            <div class="flower-num">{{ flowerCount }}</div>
          </div>
        </template>
        <template #botton-right>
          <div class="rank">
            <span>班级排名</span>
            <div>{{ rank }}</div>
          </div>
        </template>
        <!-- 综合分析 -->
        <template #panel-right>
          <comprehensiveInfo :studentId="studentId"></comprehensiveInfo>
        </template>
        <!-- 学生进步档案 -->
        <template #panel-bottom>
          <advancedInfo :studentId="studentId"></advancedInfo>
        </template>
        <!-- 课前 -->
        <template #middle-content1>
          <beforeClassInfo :studentId="studentId"></beforeClassInfo>
        </template>
        <!-- 课中 -->
        <template #middle-content2>
          <duringClassInfo :studentId="studentId"></duringClassInfo>
        </template>
        <!-- 课后 -->
        <template #middle-content3>
          <afterClassInfo :studentId="studentId"></afterClassInfo>
        </template>
        <!-- 评语 -->
        <template #middle-content4>
          <wordcloudInfo :studentId="studentId"></wordcloudInfo>
        </template>
      </Specifices>
    </div>
  </template>
  
  <script>
  import comprehensiveInfo from "../components/studentDetail/comprehensiveInfo.vue";
  import beforeClassInfo from "../components/studentDetail/beforeClassInfo.vue";
  import duringClassInfo from "../components/studentDetail/duringClassInfo.vue";
  import wordcloudInfo from "../components/studentDetail/wordCloudInfo.vue";
  import advancedInfo from "../components/studentDetail/advancedInfo.vue";
  import afterClassInfo from "../components/studentDetail/afterClassInfo.vue";
  export default {
      name: "studentDetail",
      components: {
          comprehensiveInfo,
          beforeClassInfo,
          duringClassInfo,
          wordcloudInfo,
          advancedInfo,
          afterClassInfo,
      },
      data() {
          return {
              searchQuery: "",
              showDropdown: false,
              selectedValue: "",
              loading: false,
              initialOptions: [],
              filteredOptions: [],
              studnetInfo: {},
              score: "",
              rank: "",
              rankCache: {},
              flowerCount: 0,
          };
      },
      created() {
          this.getAllStudents();
          document.addEventListener('click', this.handleClickOutside);
      },
      beforeDestroy() {
          document.removeEventListener('click', this.handleClickOutside);
      },
      watch: {
          selectedValue(newVal) {
              if (!newVal) {
                  this.filteredOptions = [...this.initialOptions];
                  this.$store.commit('updateStudentId', '');
                  this.searchQuery = '';
              } else {
                  this.$store.commit('updateStudentId', newVal.studentId);
                  this.searchQuery = newVal.studentName;
                  this.getStudentInfo();
                  this.getScore();
                  this.getRank();
                  this.getFlowerCount();
              }
          },
          "$store.state.current": {
              immediate: true,
              handler(newVal) {
                  if (newVal !== undefined) {
                      this.getAllStudents();
                  }
              },
          },
      },
      computed: {
          studentId() {
              return this.$store.state.studentId;
          },
          starCounts() {
              const totalStars = 5;
              let yellowStars = 0;
  
              if (this.score >= 0 && this.score < 60) {
                  yellowStars = 2;
              } else if (this.score >= 60 && this.score < 80) {
                  yellowStars = 3;
              } else if (this.score >= 80 && this.score < 90) {
                  yellowStars = 4;
              } else if (this.score >= 90 && this.score <= 100) {
                  yellowStars = 5;
              }
  
              const whiteStars = totalStars - yellowStars;
              return { yellowStars, whiteStars };
          },
      },
      methods: {
          handleSearch() {
              if (this.searchQuery) {
                  this.loading = true;
                  setTimeout(() => {
                      this.filteredOptions = this.initialOptions.filter((item) => {
                          return item.studentName.toLowerCase().includes(this.searchQuery.toLowerCase());
                      });
                      this.loading = false;
                  }, 200);
              } else {
                  this.filteredOptions = [...this.initialOptions];
              }
          },
          selectOption(item) {
              this.selectedValue = item;
              this.searchQuery = item.studentName;
              this.showDropdown = false;
          },
          handleClickOutside(event) {
              const selectWrapper = document.querySelector('.custom-select-wrapper');
              if (selectWrapper && !selectWrapper.contains(event.target)) {
                  this.showDropdown = false;
              }
          },
          getAllStudents() {
              this.$axios
                  .get("/students/getAllStudents")
                  .then((res) => {
                      const filteredData = res.data.data.filter(
                          (item) => item.studentClassId === this.$store.state.current
                      );
                      this.initialOptions = filteredData.map((item) => ({
                          ...item,
                          studentClassId: this.$store.state.current,
                      }));
                      this.filteredOptions = [...this.initialOptions];
                      this.$store.commit('updateOptions', this.filteredOptions);
                      
                      // 获取所有学生的成绩并选择最高分的学生
                      if (this.filteredOptions.length > 0) {
                          const scorePromises = this.filteredOptions.map(student => 
                              this.$axios.get("/students/getScoreById/" + student.studentId)
                                  .then(res => ({
                                      student,
                                      score: res.data.data
                                  }))
                          );
                          Promise.all(scorePromises)
                              .then(results => {
                                  const highestScoreStudent = results.reduce((max, current) => 
                                      current.score > max.score ? current : max
                                  );
                                  this.selectedValue = highestScoreStudent.student;
                              })
                              .catch(error => {
                                  console.error('获取学生成绩失败:', error);
                                  // 如果获取成绩失败，默认选择第一个学生
                                  this.selectedValue = this.filteredOptions[0];
                              });
                      }
                  });
          },
          getStudentInfo() {
              this.$axios
                  .get("/students/getStudentById/" + this.studentId)
                  .then((res) => {
                      this.studnetInfo = res.data.data;
                  });
          },
          getScore() {
              this.$axios
                  .get("/students/getScoreById/" + this.studentId)
                  .then((res) => {
                      this.score = res.data.data;
                  });
          },
          getRank() {
              const cacheKey = this.studentId + '-' + this.$store.state.current;
              if (this.rankCache[cacheKey]) {
                  this.rank = this.rankCache[cacheKey];
                  return;
              }
              this.$axios
                  .get(
                      "/students/getRankByIdAndClassId/" +
                      this.studentId +
                      "/" +
                      this.$store.state.current
                  )
                  .then((res) => {
                      this.rank = res.data.data;
                      this.rankCache[cacheKey] = res.data.data;
                  });
          },
          updateSelectedValue(newValue) {
              this.selectedValue = newValue;
          },
          getFlowerCount() {
              this.$axios
                  .get("/studentMissionFlower/getFlowerCountById/" + this.studentId)
                  .then((res) => {
                      this.flowerCount = res.data.data;
                  });
          },
      },
  };
  </script>
  <style scoped>
  .index {
    height: 100%;
  }
  
  .custom-select-wrapper {
    position: relative;
    width: 50%;
    margin-top: 0%;
  }
  
  .search-input-container {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .search-input {
    width: 100%;
    padding: 12px 40px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(1, 28, 82, 0.8);
    color: #00d3e9;
    font-size: 14px;
    transition: all 0.3s ease;
  }
  
  .search-input:focus {
    outline: none;
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  }
  
  .search-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d3e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.5));
  }
  
  .custom-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background-color: rgba(1, 28, 82, 0.95);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  
  .dropdown-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #00d3e9;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    background: linear-gradient(90deg,
        rgba(0, 255, 255, 0.05) 0%,
        rgba(11, 97, 170, 0.1) 50%,
        rgba(0, 255, 255, 0.05) 100%);
  }
  
  .header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
  }
  
  .header-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d3e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.5));
  }
  
  .header-text {
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  }
  
  .header-badge {
    background: linear-gradient(45deg, #00ffff, #0b61aa);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  }
  
  .header-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 255, 255, 0.5),
        transparent);
  }
  
  .custom-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  }
  
  .custom-option:last-child {
    border-bottom: none;
  }
  
  .custom-option:hover {
    background-color: rgba(0, 255, 255, 0.1);
  }
  
  .custom-option.selected {
    background-color: rgba(0, 255, 255, 0.15);
  }
  
  .tech-option {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eee;
  }
  
  .option-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(45deg, #00ffff, #0b61aa);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
  }
  
  /* 自定义滚动条样式 */
  .custom-dropdown::-webkit-scrollbar {
    width: 4px;
  }
  
  .custom-dropdown::-webkit-scrollbar-track {
    background: rgba(1, 28, 82, 0.4);
  }
  
  .custom-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #00ffff, #0b61aa);
    border-radius: 2px;
  }
  
  .custom-dropdown::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #00ffff, #0b61aa);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  }
  
  /* 加载动画 */
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  .loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #00d3e9;
    border-top-color: transparent;
    border-radius: 50%;
    animation: loading 0.8s linear infinite;
  }
  
  /* 头像 */
  .avatar-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
  }
  
  .avatar-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0, 160, 233, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
  }
  
  .avatar-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(0, 160, 233, 0.3), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  .sex-icon {
    width: 120%;
    height: 100%;
    margin-top: 0;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(0, 160, 233, 0.3));
  }
  
  .avatar-container:hover {
    transform: translateY(-5px);
  }
  
  .avatar-container:hover::before {
    opacity: 1;
    animation: pulse 2s infinite;
  }
  
  .avatar-container:hover::after {
    opacity: 1;
    animation: rotate 3s linear infinite;
  }
  
  .avatar-container:hover .sex-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(0, 160, 233, 0.6));
  }
  
  @keyframes pulse {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.5;
    }
  
    50% {
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 0.3;
    }
  
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.5;
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }
  
  /* 五角星 */
  .star-box {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 5px;
  }
  
  .icon {
    filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.7));
    transition: all 0.3s ease;
  }
  
  .icon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.9));
  }
  
  /* 添加星星动画效果 */
  @keyframes starPulse {
    0% {
      filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.7));
    }
  
    50% {
      filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.9));
    }
  
    100% {
      filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.7));
    }
  }
  
  .icon {
    animation: starPulse 2s infinite;
  }
  
  /* 学生信息 */
  .class-name,
  .class-id,
  .score {
    font-size: 24px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  .class-name:hover,
  .class-id:hover,
  .score:hover {
    transform: scale(1.02);
  }
  
  .class-name span,
  .class-id span,
  .score span {
    font-size: 26px;
    font-weight: 700;
    color: #4a9eff;
    margin-right: 10px;
    text-shadow: 0 0 2px rgba(74, 158, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  .class-name span::after,
  .class-id span::after,
  .score span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    transition: width 0.4s ease;
  }
  
  .class-name:hover span::after,
  .class-id:hover span::after,
  .score:hover span::after {
    width: 100%;
  }
  
  .class-name {
    color: #fff;
    text-shadow: 0 0 2px rgba(230, 243, 255, 0.3);
  }
  
  .class-name:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  }
  
  .class-id {
    color: #fff;
    text-shadow: 0 0 2px rgba(179, 217, 255, 0.3);
  }
  
  .class-id:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(204, 230, 255, 0.6);
  }
  
  .score {
    color: #fff;
    text-shadow: 0 0 2px rgba(128, 191, 255, 0.3);
  }
  
  .score:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(153, 204, 255, 0.6);
  }
  
  /* 小红花容器 */
  .flower-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  
  .flower-box span {
    color: #4a9eff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 160, 233, 0.5);
  }
  
  .flower-num {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(0, 160, 233, 0.8);
    transition: all 0.3s ease;
  }
  
  /* 排名样式 */
  .rank {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  
  .rank span {
    color: #4a9eff;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 160, 233, 0.5);
  }
  
  .rank :deep(div) {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(0, 160, 233, 0.8);
    transition: all 0.3s ease;
  }
  
  .flower-box:hover,
  .rank:hover {
    transform: translateY(-2px);
  }
  
  .flower-num:hover,
  .rank :deep(div:hover) {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(0, 160, 233, 1);
  }
  </style>